// 自定义字体颜色，背景色，字体颜色，字体等等
$importantColor: #ff3c41;
$normalColor: #37EAA0;
$whateverColor: #3772FD;
$tipColor: #afafaf;
$backgroundColor: #f5f5f5;
$borderColor: #f1f1f1;
$titleColor: #4C4646;
$font: "Open Sans",sans-serif;
$bgImage: "https://images.unsplash.com/photo-1440613905118-99b921706b5c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=255b304482a2f50d0917f3de7b06251e";

*,html,body,div{
    margin: 0;
    padding: 0;
}
ul,li{
    list-style: none;
}
body{
    font-family: $font;
    background-color: $backgroundColor;
    font-size: 14px;
}
.container{
    width: 100%;
    max-width: 640px;
    margin: 0 auto;  
    background-color: #fff;
    // border-radius: 8px;
    box-shadow: 0 0 40px rgba(0,0,0,.1);  
}
.header{
    background-image: url($bgImage);
    background-size: cover;
    // border-radius: 8px 8px 0 0;   
    position: relative;
    padding: 35px 20px;
}
.overlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.2);  
    // border-radius: 8px 8px 0 0;  
}
.font{
    position: relative;
    overflow: auto;    
}
.font span{
    color: #fff;
    z-index: 100;
}
.day{
    float: left;
    font-size: 4em;
    margin-right: 10px;
}
.week{
    display: block;
    font-size: 1.4em;
    margin-top: 13px;
    font-weight: 700;
}
.add-circle{
    position: absolute;
    background-color: $importantColor;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    right: 20px;
    bottom: -20px;
    cursor: pointer;
    box-shadow: 0 0 13px $importantColor;
}
.todo-content-title{
    padding: 20px;
    h2{
        font-size: 1.5em;
        font-weight: 400;
        color: $titleColor;
    }
    .task-report{
        font-size: .9em;
        color: $tipColor;
        margin-top: 5px;
    }
}
.todo-item{
    padding: 15px 20px;
    border-top: 1px solid $borderColor;
    position: relative;
    .label{
        // display: inline-block;
        float: left;
        width: 15px;
        height: 15px;
        background-color: $importantColor;
        border-radius: 50%;
        cursor: pointer;
    }
    .text{
        padding: 0 35px 0 26px;
        margin-top: -2px;
        .todo-input{
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            font-size: 1em;
        }
    }
    .todo-action{
      position: absolute;
      right: 20px;
      top: 13px;  
      .more{
        span{
            display: inline-block;
            width: 5px;
            height: 5px;
            background-color: $borderColor;
            border-radius: 50%;
        }
      }
    }
}